<template>
  <div class="root_style">
      <reception-header/>
      <div class="search-area">
        <el-row>
          <el-col :span="6" class="poscount-style">
            <span class="zaixian-pos">在线职位</span>
            <span class="count-style">{{totalposCount}}</span>
          </el-col>
          <el-col :span="18" class="search-select">
            <el-input placeholder="请输入工作名称" v-model="workName" class="input-with-select">
              <el-select v-model="workType" slot="prepend" placeholder="请选择">
                <el-option label="全职" value="全职"></el-option>
                <el-option label="实习" value="实习"></el-option>
              </el-select>
              <el-button slot="append" type="primary" icon="el-icon-search" @click="queryClick"></el-button>
            </el-input>
          </el-col>
        </el-row>
      </div>
      <!-- 轮播图 -->
      <swiper/>
      <!-- 品牌专区 -->
      <div class="company-list-style">
        <el-divider>
          <i class="el-icon-apple"></i>
          品牌专区
          <i class="el-icon-orange"></i>
        </el-divider>
        <div>
          <!-- 公司列表展示 -->
          <div class="company-list">
            <ul>
              <li v-for="(item,index) in companyList" :key="index" class="li-bg" @click="toCompanyPageHandle(item.aid,item.accountNumber)">
                <img 
                  :src="item.bgImage ? item.bgImage : 'https://recruitment-files.oss-cn-chengdu.aliyuncs.com/company/company_defaultbg.jpg'" 
                  alt=""
                  class="bg-style"
                >
                <div class="mask">
                  <h3>{{item.name}}</h3>
                </div>
              </li>
            </ul>          
          </div>
        </div>
      </div>
      <!-- 品牌专区 -->
      <div class="user-list-style">
        <el-divider>
          <i class="el-icon-apple"></i>
          活跃用户
          <i class="el-icon-orange"></i>
        </el-divider>
        <div>
          <!-- 活跃用户列表展示 -->
          <div class="company-list">
            <ul>
              <li v-for="(item,index) in userList" :key="index" class="li-bg" @click="toUserJobList(item.userJobAid)">
                <img 
                  :src="item.userAvatar ? item.userAvatar : 'https://recruitment-files.oss-cn-chengdu.aliyuncs.com/user/jianyeu1.png'" 
                  alt=""
                  class="bg-style"
                >
                <div class="mask">
                  <h3>{{item.userName}}</h3>
                  <h3 >需求岗位： {{item.positionName}}</h3>
                </div>
              </li>
            </ul>          
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <the-footer/>
  </div>
</template>

<script>
import ReceptionHeader from '../../../components/ReceptionHeader.vue';
import Swiper from '../../../components/Swiper.vue';
import { getCompanyList } from "../../../api/enterpriseManage/index";
import { getHaveHuntJobInfoUserAndJobList } from "../../../api/userManage/index";
import TheFooter from "../../../components/The-Footer.vue";
import { getStore } from "../../../storage/storage";
export default {
  name: "FirstPage",
  components:{
    Swiper,
    ReceptionHeader,
    TheFooter,
    TheFooter,
  },
  
  data(){
    return{
      totalposCount: 1290, // 总共职位个数（不包含已下线的）
      workName: '', // 搜索框
      workType: '', // 选择的职位类型
      companyList: [], // 公司列表
      userList: [],
    }
  },
  created(){
    // 获取全部公司列表
    this.getCompanyListFunc();

    // 获取有求职信息的用户列表
    this.getHaveHuntJobInfoUserAndJobListFunc();

    // 判断token是否存在，如果不存在就去登陆页面
    this.checkToken();

  },
  methods:{

    // 获取全部公司列表
    getCompanyListFunc(){
      getCompanyList().then(res=>{
        // console.log(res);
        this.companyList = res.data.data.companyList;
        this.totalposCount = res.data.data.totalposCount;
      })
    },

    checkToken(){
      var token = getStore("token");
      if (token === null || token === '') {
        this.$router.push("/reception/login");
        this.$message.info("请先登陆！");
      }else{
        // 检验是否过期
        getCompanyList().then(res=>{
          console.log(res);
          if (res.data.state === false && res.data.msg === 'token已过期！') {
            this.$router.push("/reception/login");
            this.$message.info("请先登陆！");
          }
        })
      }
    },

    // 获取有求职信息的用户列表
    getHaveHuntJobInfoUserAndJobListFunc(){
      getHaveHuntJobInfoUserAndJobList().then(res=>{
        // console.log(res);
        this.userList = res.data.data
      })
    },

    // 去公司页面
    toCompanyPageHandle(aid,accountNumber){
      // console.log(aid + " " + accountNumber);
      this.$router.push({
        path: '/reception/companyAllRecruitmentInfo',
        query: {
          name: accountNumber,
        }
      });
    },

    // 去该用户的求职列表页面
    toUserJobList(userJobAid){
      this.$router.push({
        path: '/reception/userPage',
        query: {
          userJobAid,
        }
      });
    },

    // 点击查询
    queryClick(){
      this.$router.push({
        path: '/reception/recuritInfoPage',
        query: {
          workName: this.workName,
          workType: this.workType,
        }
      })
    }

  },
}
</script>

<style scoped>
@import '../../../assets/css/reception/firstPage.css';
</style>